@import url("style_base.css");
@import url("style_common.css");
html {
	background-color: #ededed;
}

header {
	width: 100%;
	margin: 0 auto;
	padding: 0 5%;
	border-bottom: solid 1px #d5d5d5;
}

header div.header_right img {
	width: 2.5rem;
}


/*内容部分main========================================*/

section#main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
}

section#main h1 {
	font-size: 1rem;
	color: #999999;
	font-weight: 300;
	margin-top: 0.5rem;
}

section#main figure {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 1rem 1.5rem;
}

section#main figure:nth-child(2n+1) {
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
	width: 100%;
	padding: 1rem 1.5rem;
}

section#main figure img {
	height: 6rem;
}

section#main figure figcaption {
	width: 100%;
	display: flex;
	justify-content: flex-start;
}

section#main figure:nth-child(2n+1) figcaption {
	width: 100%;
	display: flex;
	justify-content: flex-end;
}

section#main figure div {
	width: 81%;
	font-size: 1rem;
	color: #5d5d5d;
	padding: 0.8rem 1rem 1rem 2rem;
	background-color: #FFFFFF;
	border-radius: 0.5rem;
}

section#main figure:nth-child(2n+1) div {
	background-color: #00FF00;
}

/*footer部分================================*/

footer#chat {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4rem;
	background-color: #f6f6f6;
}

footer#chat:hover {
	position: fixed;
	left: 0;
	bottom: 25rem;
	width: 100%;
	height: 4rem;
	background-color: #f6f6f6;
	transition: 500ms;
}

footer#chat div {
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: 0.5rem;
}

footer#chat div input {
	width: 100%;
	border: 0;
	border-radius: 0.5rem;
	margin:0 1rem;
	padding: 0 0.5rem;
}

footer#chat div input:hover {
	border: solid 1px #666666;
}

footer#chat div a img {
	width: 2.5rem;
	margin: 0 0.5rem;
}

footer#chat div.keyboard {
	background-color: #d1d6db;
}

footer#chat div.keyboard img {
	width: 100%;
	height: 25rem;
}




/*媒介查询部分==================================*/

@media only screen and (min-width: 1px) and (max-width: 410px) {}